<!-- 商品分类列表 -->
<template>
	<s-layout title="新闻资讯" :onShareAppMessage="shareInfo" :bgStyle="{ color: '#fff' }" >

		<!-- 骨架屏 -->
		<detailSkeleton v-if="state.skeletonLoading" />

		<!-- 下架/未找到提醒 -->
		<s-empty v-else-if="state.newsInfo === null" text="新闻不存在或已下架" icon="/static/soldout-empty.png" showAction
			actionText="再看看" actionUrl="/pages/article/index" />
		<block v-else>
			<view class="s-newsDetail">
				<view class="s-newsDetail-header">
					<view class="title ss-m-b-32">{{ state.newsInfo.title }}</view>
					<view class="ss-flex ss-row-between ss-col-center ss-m-b-24">
						<view class="ss-flex ss-flex-col ss-col-top">
							<view class="author">{{ state.newsInfo.author || '卓悦游船宴会中心' }}</view>
							<view class="date">{{ formatDate(state.newsInfo.createTime, 'YYYY-MM-DD') }}</view>
						</view>
						<view class="browse ss-flex ss-row-center ss-col-center">
							<img src="/static/img/article/browseCount.png" style="width: 18px; height:18px; margin-right: 6px" alt="" />
							{{ state.newsInfo.browseCount }}
						</view>
					</view>
					<!-- <view class="line"></view> -->
					<!-- <view class="desc">{{ state.newsInfo.introduction }}</view> -->
				</view>
				<view class="s-newsDetail-body">
					<mp-html :content="state.newsInfo.content" />
				</view>
			</view>
			
			<!-- 详情 tabbar -->
			<detail-tabbar :spuId="state.spuId" ></detail-tabbar>
		</block>	
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import articleApi from '@/sheep/api/promotion/article';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import detailSkeleton from './components/detail-skeleton.vue';
	import detailTabbar from './components/detail-tabbar.vue';
	import {
		computed,
		reactive
	} from 'vue';
	import { isEmpty } from 'lodash-es';
	import { formatDate } from '@/sheep/util';

	const state = reactive({
		skeletonLoading: true,
		newsId: 0,
		newsInfo: null,
		spuId: 0,
	})
	// 分享信息
	const shareInfo = computed(() => {
	  if (isEmpty(state.newsInfo)) return {};
	  return sheep.$platform.share.getShareInfo(
	    {
	      title: state.newsInfo.title,
	      image: sheep.$url.cdn(state.newsInfo.picUrl),
	      desc: state.newsInfo.introduction,
	      params: {
	        page: '6',
	        query: state.newsInfo.id,
	      },
	    },
	    {
	      type: 'article', // 新闻海报
	      title: state.newsInfo.title, // 新闻名称
	      desc: state.newsInfo.introduction, // 新闻描述
	      image: sheep.$url.cdn(state.newsInfo.picUrl), // 新闻主图
	    },
	  );
	});
	
	onLoad((options) => {
		// 非法参数
		if (!options.id) {
			state.newsInfo = null;
			return;
		}
		state.newsId = options.id;
		// 增加浏览量
		articleApi.addBrowseCount(state.newsId)
		// 1. 加载新闻信息
		articleApi.getArticle(state.newsId).then((res) => {
			console.log(res)
			// 未找到新闻
			if (res.code !== 0 || !res.data) {
				state.newsInfo = null;
				return;
			}
			// 加载到新闻
			state.skeletonLoading = false;
			state.newsInfo = res.data;
			state.spuId = res.data.spuId	
		});
	});
</script>

<style lang="scss" scoped>
.s-newsDetail {
	padding: 20px 10px;
	background: #fff;
	.line {
		border-bottom: 1px solid #dfd5d5;
	}
	.title {
		font-size: 36rpx;
		line-height: 56rpx;
		color: #000;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.desc {
		font-size: 0.875rem;
		line-height: 1rem;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.author {
		font-size: 0.8rem;
		color: #333;
	}
	.date,.browse {
		font-size: 0.725rem;
		color: #999;
	}
	
}

::v-deep .s-newsDetail-body {
	padding: 5px 0 20px;
	img {
		max-width:100%;
	}
}

</style>